<template>
    <div 
      class="filter-option"
      :class="{ active }"
      @click="$emit('select', value)"
    >
      <slot></slot>
    </div>
  </template>
  
  <script setup>
  defineProps({
    value: {
      type: String,
      required: true
    },
    active: {
      type: Boolean,
      default: false
    }
  })
  
  defineEmits(['select'])
  </script>
  
  <style scoped>
  .filter-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition);
  }
  
  .filter-option:hover {
    background: #f0f5ff;
  }
  
  .filter-option.active {
    background: #e6f0ff;
    color: var(--primary);
    font-weight: 500;
  }
  </style>